﻿@using Grand.Core;
@using Grand.Framework.Themes
@model PublicInfoModel
@inject IWorkContext workContext
@inject IPageHeadBuilder pagebuilder
@inject IThemeContext themeContext
@{
    var themeName = themeContext.WorkingThemeName;
    if (themeName == "VueTheme")
    {
        <script asp-location="Header">
            document.addEventListener('DOMContentLoaded', function () {
                // fire if first slide has set full width
                if (document.querySelector('#GrandCarousel .carousel-item').getAttribute('data-width') == 'full') {
                    var mainContainer = document.querySelector(".main-container");
                    var GrandCarousel = document.getElementById("GrandCarousel");
                    var parentDiv = mainContainer.parentNode;

                    parentDiv.insertBefore(GrandCarousel, mainContainer);
                }
            });
        </script>

        pagebuilder.AddCssFileParts(ResourceLocation.Head, "~/Plugins/Widgets.Slider/Content/vue-style.css");
    }
    else
    {
        var supportRtl = workContext.WorkingLanguage.Rtl;
        if (supportRtl)
        {
            pagebuilder.AppendScriptParts(ResourceLocation.Footer, "~/Plugins/Widgets.Slider/Content/slider.rtl.js");
            pagebuilder.AddCssFileParts(ResourceLocation.Head, "~/Plugins/Widgets.Slider/Content/style.rtl.css");
        }
        else
        {
            pagebuilder.AppendScriptParts(ResourceLocation.Footer, "~/Plugins/Widgets.Slider/Content/slider.js");
            pagebuilder.AddCssFileParts(ResourceLocation.Head, "~/Plugins/Widgets.Slider/Content/style.css");
        }
    }
}
@if (themeName == "VueTheme")
{
    <b-carousel id="GrandCarousel"  fade controls indicators img-width="1024" img-height="267" :interval="6000">
        @foreach (var item in Model.Slide)
        {
            if (string.IsNullOrEmpty(item.PictureUrl))
            {
                <b-carousel-slide height="500" img-blank img-alt="Blank image" caption-html="@item.Description" @if (item.FullWidth) { <text> data-width="full" </text> } @if (!string.IsNullOrEmpty(item.Link)) { <text> class="link" onclick="window.location='@item.Link'" </text> }></b-carousel-slide>
            }
            else
            {
                <b-carousel-slide text-html="@item.Description" @if (item.FullWidth) { <text> data-width="full" class="img-desc wide-img @if (!string.IsNullOrEmpty(item.Link)) { <text> link </text> }" </text>  } else { <text> class="img-desc no-wide-img @if (!string.IsNullOrEmpty(item.Link)) { <text> link </text> }" </text> } @if (!string.IsNullOrEmpty(item.Link)) { <text> onclick="window.location='@item.Link'" </text> }>
                    <template #img>
                        <picture>
                            <source media="(max-width: 767px)" sizes="1px" srcset=" 1w" />
                            <img class="d-block img-fluid" src="@item.PictureUrl" data-thumb="@item.PictureUrl" data-transition="" alt="@item.Name" title="" />
                        </picture>
                    </template>
                </b-carousel-slide>
            }
        }
    </b-carousel>
}
else
{
    <div id="GrandCarousel" class="carousel slide" data-ride="carousel" data-interval="6000">
        <ol class="carousel-indicators">
            @foreach (var item in Model.Slide)
            {
                if (!string.IsNullOrEmpty(item.PictureUrl))
                {
                    <li data-target="#GrandCarousel" data-slide-to="" class="active"></li>
                }
            }
        </ol>
        <div class="carousel-inner">
            @foreach (var item in Model.Slide)
            {
                if (string.IsNullOrEmpty(item.PictureUrl))
                {
                    //without background
                    if (item.FullWidth)
                    {
                        <div class="carousel-item img-desc wide-img ">
                            <div class="carousel-caption">
                                @Html.Raw(item.Description)
                            </div>
                        </div>
                    }
                    else
                    {
                        <div class="carousel-item img-desc no-wide-img">
                            <div class="container">
                                <div class="carousel-caption">
                                    @Html.Raw(item.Description)
                                </div>
                            </div>
                        </div>
                    }

                }
                else
                {
                    //with background
                    if (item.FullWidth)
                    {
                        <div class="carousel-item wide-img with-bg" @if (!string.IsNullOrEmpty(item.Link)) { <text> onclick="window.location='@item.Link'" </text> }>
                            <a>
                                <picture>
                                    <source media="(max-width: 767px)" sizes="1px" srcset=" 1w" />
                                    <img class="d-block img-fluid" src="@item.PictureUrl" data-thumb="@item.PictureUrl" data-transition="" alt="@item.Name" title="" />
                                </picture>
                            </a>
                            <div class="carousel-caption d-none d-md-block">
                                @Html.Raw(item.Description)
                            </div>
                        </div>
                    }
                    else
                    {
                        <div class="carousel-item no-wide-img with-bg" @if (!string.IsNullOrEmpty(item.Link)) { <text> onclick="window.location='@item.Link'" </text> }>
                            <div class="container">
                                <a>
                                    <picture>
                                        <source media="(max-width: 767px)" sizes="1px" srcset=" 1w" />
                                        <img class="d-block img-fluid" src="@item.PictureUrl" data-thumb="@item.PictureUrl" data-transition="" alt="" title="@item.Name">
                                    </picture>
                                </a>
                                <div class="carousel-caption container d-none d-md-block">
                                    @Html.Raw(item.Description)
                                </div>
                            </div>
                        </div>
                    }
                }
            }
        </div>
        <a class="carousel-control-prev" href="#GrandCarousel" role="button" data-slide="prev">
            <span class="mdi mdi-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#GrandCarousel" role="button" data-slide="next">
            <span class="mdi mdi-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
}